<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>实用的60个CSS代码片段 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="CSS,Snippet,">
  

  <meta name="description" content="1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter&amp;#123;    position: relative;    top: 50%;    -webkit-transform: translateY(-50%);    -o-transform: translateY(-50">
<meta name="keywords" content="CSS,Snippet">
<meta property="og:type" content="article">
<meta property="og:title" content="实用的60个CSS代码片段">
<meta property="og:url" content="http://blog.poetries.top/2016/08/13/实用的60个CSS代码片段/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter&amp;#123;    position: relative;    top: 50%;    -webkit-transform: translateY(-50%);    -o-transform: translateY(-50">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://sfault-image.b0.upaiyun.com/352/854/3528546899-56fe3aca51c9d_articlex">
<meta property="og:image" content="https://sfault-image.b0.upaiyun.com/377/497/3774978981-56fe3acb088b0_articlex">
<meta property="og:updated_time" content="2020-08-15T04:25:31.942Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="实用的60个CSS代码片段">
<meta name="twitter:description" content="1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter&amp;#123;    position: relative;    top: 50%;    -webkit-transform: translateY(-50%);    -o-transform: translateY(-50">
<meta name="twitter:image" content="https://sfault-image.b0.upaiyun.com/352/854/3528546899-56fe3aca51c9d_articlex">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#1、垂直对齐"><span class="toc-text">1、垂直对齐</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、伸展一个元素到窗口高度"><span class="toc-text">2、伸展一个元素到窗口高度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3、基于文件格式使用不同的样式"><span class="toc-text">3、基于文件格式使用不同的样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4、创建跨浏览器的图像灰度"><span class="toc-text">4、创建跨浏览器的图像灰度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5、背景渐变动画"><span class="toc-text">5、背景渐变动画</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6、CSS：表格列宽自适用"><span class="toc-text">6、CSS：表格列宽自适用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7、只在一边或两边显示盒子阴影"><span class="toc-text">7、只在一边或两边显示盒子阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8、包裹长文本"><span class="toc-text">8、包裹长文本</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9、制造模糊文本"><span class="toc-text">9、制造模糊文本</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10、用CSS动画实现省略号动画"><span class="toc-text">10、用CSS动画实现省略号动画</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11、样式重置"><span class="toc-text">11、样式重置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12、典型的CSS清除浮动"><span class="toc-text">12、典型的CSS清除浮动</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13、新版清除浮动（2011）"><span class="toc-text">13、新版清除浮动（2011）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14、跨浏览器的透明"><span class="toc-text">14、跨浏览器的透明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#15、CSS引用模板"><span class="toc-text">15、CSS引用模板</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16、个性圆角"><span class="toc-text">16、个性圆角</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#17、通用媒体查询"><span class="toc-text">17、通用媒体查询</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#18、现代字体栈"><span class="toc-text">18、现代字体栈</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#19、自定义文本选择"><span class="toc-text">19、自定义文本选择</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#20、为logo隐藏H1"><span class="toc-text">20、为logo隐藏H1</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#21、图片边框偏光"><span class="toc-text">21、图片边框偏光</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#22、锚链接伪类"><span class="toc-text">22、锚链接伪类</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#23、奇特的CSS引用"><span class="toc-text">23、奇特的CSS引用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#24、CSS3：全屏背景"><span class="toc-text">24、CSS3：全屏背景</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#25、内容垂直居中"><span class="toc-text">25、内容垂直居中</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#26、强制出现垂直滚动条"><span class="toc-text">26、强制出现垂直滚动条</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#27、CSS3渐变模板"><span class="toc-text">27、CSS3渐变模板</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#28、-font-face模板"><span class="toc-text">28、@font-face模板</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#29、缝合CSS3元素"><span class="toc-text">29、缝合CSS3元素</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#30、CSS3-斑马线"><span class="toc-text">30、CSS3 斑马线</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#31、有趣的-amp"><span class="toc-text">31、有趣的&amp;</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#32、大字段落"><span class="toc-text">32、大字段落</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#33、内部CSS3-盒阴影"><span class="toc-text">33、内部CSS3 盒阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#34、外部CSS3-盒阴影"><span class="toc-text">34、外部CSS3 盒阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#35、三角形列表项目符号"><span class="toc-text">35、三角形列表项目符号</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#36、固定宽度的居中布局"><span class="toc-text">36、固定宽度的居中布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#37、CSS3-列文本"><span class="toc-text">37、CSS3 列文本</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#38、CSS固定页脚"><span class="toc-text">38、CSS固定页脚</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#39、IE6的PNG透明修复"><span class="toc-text">39、IE6的PNG透明修复</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#40、跨浏览器设置最小高度"><span class="toc-text">40、跨浏览器设置最小高度</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#41、CSS3-鲜艳的输入"><span class="toc-text">41、CSS3 鲜艳的输入</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#42、基于文件类型的链接样式"><span class="toc-text">42、基于文件类型的链接样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#43、强制换行"><span class="toc-text">43、强制换行</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#44、在可点击的项目上强制手型"><span class="toc-text">44、在可点击的项目上强制手型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#45、网页顶部盒阴影"><span class="toc-text">45、网页顶部盒阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#46、CSS3对话气泡"><span class="toc-text">46、CSS3对话气泡</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#47、H1-H5默认样式"><span class="toc-text">47、H1-H5默认样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#48、纯CSS背景噪音"><span class="toc-text">48、纯CSS背景噪音</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#49、持久的列表排序"><span class="toc-text">49、持久的列表排序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#50、CSS悬浮提示文本"><span class="toc-text">50、CSS悬浮提示文本</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#51、深灰色的圆形按钮"><span class="toc-text">51、深灰色的圆形按钮</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#52、在可打印的网页中显示URLs"><span class="toc-text">52、在可打印的网页中显示URLs</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#53、禁用移动Webkit的选择高亮"><span class="toc-text">53、禁用移动Webkit的选择高亮</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#54、CSS3-圆点图案"><span class="toc-text">54、CSS3 圆点图案</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#55、CSS3-方格图案"><span class="toc-text">55、CSS3 方格图案</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#56、Github的fork色带"><span class="toc-text">56、Github的fork色带</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#57、CSS-font属性缩写"><span class="toc-text">57、CSS font属性缩写</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#58、论文页面的卷曲效果"><span class="toc-text">58、论文页面的卷曲效果</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#59、鲜艳的锚链接"><span class="toc-text">59、鲜艳的锚链接</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#60、带CSS3特色的横幅显示"><span class="toc-text">60、带CSS3特色的横幅显示</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-实用的60个CSS代码片段" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">实用的60个CSS代码片段</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.08.13</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 4.7k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 26分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h4 id="1、垂直对齐"><a href="#1、垂直对齐" class="headerlink" title="1、垂直对齐"></a>1、垂直对齐</h4><hr>
<p>如果你用<code>CSS</code>，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用<code>CSS3</code>的<code>Transform</code>，可以很优雅的解决这个困惑：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.verticalcenter</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">-webkit-transform</span>: <span class="built_in">translateY</span>(-<span class="number">50%</span>);</span><br><span class="line">    <span class="attribute">-o-transform</span>: <span class="built_in">translateY</span>(-<span class="number">50%</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对<code>Transform</code>的支持是需要关注的，<br><code>Chrome 4</code>, <code>Opera 10</code>, <code>Safari 3</code>, <code>Firefox 3</code>, <code>and Internet Explorer 9</code>均支持该属性<br><a id="more"></a></p>
<h4 id="2、伸展一个元素到窗口高度"><a href="#2、伸展一个元素到窗口高度" class="headerlink" title="2、伸展一个元素到窗口高度"></a>2、伸展一个元素到窗口高度</h4><hr>
<p>在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，<br>我们需要伸展顶层元素：<code>html</code>和<code>body</code>:</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">html</span>, </span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>然后将<code>100%</code>应用到任何元素的高</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3、基于文件格式使用不同的样式"><a href="#3、基于文件格式使用不同的样式" class="headerlink" title="3、基于文件格式使用不同的样式"></a>3、基于文件格式使用不同的样式</h4><hr>
<p>为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href^=<span class="string">"http://"</span>]</span>&#123;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(external.gif) no-repeat center right;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* emails */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href^=<span class="string">"mailto:"</span>]</span>&#123;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(email.png) no-repeat center right;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* pdfs */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href$=<span class="string">".pdf"</span>]</span>&#123;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(pdf.png) no-repeat center right;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://runjs.cn/code/a3uuodvh" target="_blank" rel="noopener">效果演示</a></p>
<h4 id="4、创建跨浏览器的图像灰度"><a href="#4、创建跨浏览器的图像灰度" class="headerlink" title="4、创建跨浏览器的图像灰度"></a>4、创建跨浏览器的图像灰度</h4><hr>
<p>灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：</p>
<figure class="highlight svg"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">svg</span> <span class="attr">xmlns</span>=<span class="string">"http://www.w3.org/2000/svg"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">filter</span> <span class="attr">id</span>=<span class="string">"grayscale"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">feColorMatrix</span> <span class="attr">type</span>=<span class="string">"matrix"</span> <span class="attr">values</span>=<span class="string">"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">filter</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>为了跨浏览器，会用到<code>filter</code>属性：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">filter</span>: <span class="built_in">url</span>(filters.svg#grayscale); <span class="comment">/* Firefox 3.5+ */</span></span><br><span class="line">    <span class="attribute">filter</span>: gray; <span class="comment">/* IE6-9 */</span></span><br><span class="line">    <span class="attribute">-webkit-filter</span>: <span class="built_in">grayscale</span>(<span class="number">1</span>); <span class="comment">/* Google Chrome, Safari 6+ &amp; Opera 15+ */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="5、背景渐变动画"><a href="#5、背景渐变动画" class="headerlink" title="5、背景渐变动画"></a>5、背景渐变动画</h4><hr>
<p><code>CSS</code>中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">button</span> &#123;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(#<span class="number">5187</span>c4, #<span class="number">1</span>c2f45);</span><br><span class="line">    <span class="attribute">background-size</span>: auto <span class="number">200%</span>;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">transition</span>: background-position <span class="number">0.5s</span>;</span><br><span class="line">&#125;    </span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://runjs.cn/code/zfbvqptv" target="_blank" rel="noopener">效果演示：</a></p>
<h4 id="6、CSS：表格列宽自适用"><a href="#6、CSS：表格列宽自适用" class="headerlink" title="6、CSS：表格列宽自适用"></a>6、CSS：表格列宽自适用</h4><hr>
<p>对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给<code>td</code>元素添加<code>white-space: nowrap;</code>能让文本正确的换行</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">td</span> &#123;</span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://runjs.cn/code/yghxo4ht" target="_blank" rel="noopener">演示</a></p>
<h4 id="7、只在一边或两边显示盒子阴影"><a href="#7、只在一边或两边显示盒子阴影" class="headerlink" title="7、只在一边或两边显示盒子阴影"></a>7、只在一边或两边显示盒子阴影</h4><hr>
<p>如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位<code>:after</code>伪类。实现底边阴影的代码如下</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.box-shadow</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF8020</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">160px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: -<span class="number">45px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">80px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box-shadow</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">88px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">75px</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">8px</span> <span class="number">2px</span> <span class="number">#000000</span>;</span><br><span class="line">       <span class="attribute">-moz-box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">8px</span> <span class="number">2px</span> <span class="number">#000000</span>;</span><br><span class="line">            <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">8px</span> <span class="number">2px</span> <span class="number">#000000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://runjs.cn/code/mlynp05w" target="_blank" rel="noopener">演示</a></p>
<h4 id="8、包裹长文本"><a href="#8、包裹长文本" class="headerlink" title="8、包裹长文本"></a>8、包裹长文本</h4><hr>
<p>如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。</p>
<p><img src="https://sfault-image.b0.upaiyun.com/352/854/3528546899-56fe3aca51c9d_articlex" alt></p>
<p>简单的<code>CSS</code>代码就能在容器中调整文本：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">pre</span> &#123;</span><br><span class="line">    <span class="attribute">white-space</span>: pre-line;</span><br><span class="line">    <span class="attribute">word-wrap</span>: break-word;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>效果看起来如下：</p>
<p><img src="https://sfault-image.b0.upaiyun.com/377/497/3774978981-56fe3acb088b0_articlex" alt></p>
<h4 id="9、制造模糊文本"><a href="#9、制造模糊文本" class="headerlink" title="9、制造模糊文本"></a>9、制造模糊文本</h4><hr>
<p>想要让文本模糊？可以使用<code>color</code>透明和<code>text-shadow</code>实现</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.blurry-text</span> &#123;</span><br><span class="line">   <span class="attribute">color</span>: transparent;</span><br><span class="line">   <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://runjs.cn/code/cjwnefhi" target="_blank" rel="noopener">演示</a></p>
<h4 id="10、用CSS动画实现省略号动画"><a href="#10、用CSS动画实现省略号动画" class="headerlink" title="10、用CSS动画实现省略号动画"></a>10、用CSS动画实现省略号动画</h4><hr>
<p>这个片段将帮助你制造一个<code>ellipsis</code>的动画，对于简单的加载状态是很有用的，而不用去使用<code>gif</code>图像。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.loading</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">vertical-align</span>: bottom;</span><br><span class="line">    <span class="attribute">animation</span>: ellipsis <span class="number">2s</span> infinite;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"\2026"</span>; <span class="comment">/* ascii code for the ellipsis character */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> ellipsis &#123;</span><br><span class="line">    <span class="selector-tag">from</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">to</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">15px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="http://runjs.cn/code/ouap5vot" target="_blank" rel="noopener">演示</a></p>
<h4 id="11、样式重置"><a href="#11、样式重置" class="headerlink" title="11、样式重置"></a>11、样式重置</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">html</span>, <span class="selector-tag">body</span>, <span class="selector-tag">div</span>, <span class="selector-tag">span</span>, <span class="selector-tag">applet</span>, <span class="selector-tag">object</span>, <span class="selector-tag">iframe</span>, <span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>, <span class="selector-tag">p</span>, <span class="selector-tag">blockquote</span>, <span class="selector-tag">pre</span>, <span class="selector-tag">a</span>, <span class="selector-tag">abbr</span>, <span class="selector-tag">acronym</span>, <span class="selector-tag">address</span>, <span class="selector-tag">big</span>, <span class="selector-tag">cite</span>, <span class="selector-tag">code</span>, <span class="selector-tag">del</span>, <span class="selector-tag">dfn</span>, <span class="selector-tag">em</span>, <span class="selector-tag">img</span>, <span class="selector-tag">ins</span>, <span class="selector-tag">kbd</span>, <span class="selector-tag">q</span>, <span class="selector-tag">s</span>, <span class="selector-tag">samp</span>, <span class="selector-tag">small</span>, <span class="selector-tag">strike</span>, <span class="selector-tag">strong</span>, <span class="selector-tag">sub</span>, <span class="selector-tag">sup</span>, <span class="selector-tag">tt</span>, <span class="selector-tag">var</span>, <span class="selector-tag">b</span>, <span class="selector-tag">u</span>, <span class="selector-tag">i</span>, <span class="selector-tag">center</span>, <span class="selector-tag">dl</span>, <span class="selector-tag">dt</span>, <span class="selector-tag">dd</span>, <span class="selector-tag">ol</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">li</span>, <span class="selector-tag">fieldset</span>, <span class="selector-tag">form</span>, <span class="selector-tag">label</span>, <span class="selector-tag">legend</span>, <span class="selector-tag">table</span>, <span class="selector-tag">caption</span>, <span class="selector-tag">tbody</span>, <span class="selector-tag">tfoot</span>, <span class="selector-tag">thead</span>, <span class="selector-tag">tr</span>, <span class="selector-tag">th</span>, <span class="selector-tag">td</span>, <span class="selector-tag">article</span>, <span class="selector-tag">aside</span>, <span class="selector-tag">canvas</span>, <span class="selector-tag">details</span>, <span class="selector-tag">embed</span>, <span class="selector-tag">figure</span>, <span class="selector-tag">figcaption</span>, <span class="selector-tag">footer</span>, <span class="selector-tag">header</span>, <span class="selector-tag">hgroup</span>, <span class="selector-tag">menu</span>, <span class="selector-tag">nav</span>, <span class="selector-tag">output</span>, <span class="selector-tag">ruby</span>, <span class="selector-tag">section</span>, <span class="selector-tag">summary</span>, <span class="selector-tag">time</span>, <span class="selector-tag">mark</span>, <span class="selector-tag">audio</span>, <span class="selector-tag">video</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">font</span>: inherit;</span><br><span class="line">  <span class="attribute">vertical-align</span>: baseline;</span><br><span class="line">  <span class="attribute">outline</span>: none;</span><br><span class="line">  <span class="attribute">-webkit-box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">-moz-box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">html</span> &#123; <span class="attribute">height</span>: <span class="number">101%</span>; &#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123; <span class="attribute">font-size</span>: <span class="number">62.5%</span>; <span class="attribute">line-height</span>: <span class="number">1</span>; <span class="attribute">font-family</span>: Arial, Tahoma, sans-serif; &#125;</span><br><span class="line"><span class="selector-tag">article</span>, <span class="selector-tag">aside</span>, <span class="selector-tag">details</span>, <span class="selector-tag">figcaption</span>, <span class="selector-tag">figure</span>, <span class="selector-tag">footer</span>, <span class="selector-tag">header</span>, <span class="selector-tag">hgroup</span>, <span class="selector-tag">menu</span>, <span class="selector-tag">nav</span>, <span class="selector-tag">section</span> &#123; <span class="attribute">display</span>: block; &#125;</span><br><span class="line"><span class="selector-tag">ol</span>, <span class="selector-tag">ul</span> &#123; <span class="attribute">list-style</span>: none; &#125;</span><br><span class="line"><span class="selector-tag">blockquote</span>, <span class="selector-tag">q</span> &#123; <span class="attribute">quotes</span>: none; &#125;</span><br><span class="line"><span class="selector-tag">blockquote</span><span class="selector-pseudo">:before</span>, <span class="selector-tag">blockquote</span><span class="selector-pseudo">:after</span>, <span class="selector-tag">q</span><span class="selector-pseudo">:before</span>, <span class="selector-tag">q</span><span class="selector-pseudo">:after</span> &#123; <span class="attribute">content</span>: <span class="string">''</span>; <span class="attribute">content</span>: none; &#125;</span><br><span class="line"><span class="selector-tag">strong</span> &#123; <span class="attribute">font-weight</span>: bold; &#125; </span><br><span class="line"><span class="selector-tag">table</span> &#123; <span class="attribute">border-collapse</span>: collapse; <span class="attribute">border-spacing</span>: <span class="number">0</span>; &#125;</span><br><span class="line"><span class="selector-tag">img</span> &#123; <span class="attribute">border</span>: <span class="number">0</span>; <span class="attribute">max-width</span>: <span class="number">100%</span>; &#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123; <span class="attribute">font-size</span>: <span class="number">1.2em</span>; <span class="attribute">line-height</span>: <span class="number">1.0em</span>; <span class="attribute">color</span>: <span class="number">#333</span>; &#125;</span><br></pre></td></tr></table></figure>
<h4 id="12、典型的CSS清除浮动"><a href="#12、典型的CSS清除浮动" class="headerlink" title="12、典型的CSS清除浮动"></a>12、典型的CSS清除浮动</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123; <span class="attribute">content</span>: <span class="string">"."</span>; <span class="attribute">display</span>: block; <span class="attribute">clear</span>: both; <span class="attribute">visibility</span>: hidden; <span class="attribute">line-height</span>: <span class="number">0</span>; <span class="attribute">height</span>: <span class="number">0</span>; &#125;</span><br><span class="line"><span class="selector-class">.clearfix</span> &#123; <span class="attribute">display</span>: inline-block; &#125;</span><br><span class="line"><span class="selector-tag">html</span><span class="selector-attr">[xmlns]</span> <span class="selector-class">.clearfix</span> &#123; <span class="attribute">display</span>: block; &#125;</span><br><span class="line">* <span class="selector-tag">html</span> <span class="selector-class">.clearfix</span> &#123; <span class="attribute">height</span>: <span class="number">1%</span>; &#125;</span><br></pre></td></tr></table></figure>
<h4 id="13、新版清除浮动（2011）"><a href="#13、新版清除浮动（2011）" class="headerlink" title="13、新版清除浮动（2011）"></a>13、新版清除浮动（2011）</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span>, <span class="selector-class">.container</span><span class="selector-pseudo">:after</span> &#123; <span class="attribute">content</span>: <span class="string">""</span>; <span class="attribute">display</span>: table; &#125;</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123; <span class="attribute">clear</span>: both; &#125;</span><br><span class="line"><span class="comment">/* IE 6/7 */</span></span><br><span class="line"><span class="selector-class">.clearfix</span> &#123; <span class="attribute">zoom</span>: <span class="number">1</span>; &#125;</span><br></pre></td></tr></table></figure>
<h4 id="14、跨浏览器的透明"><a href="#14、跨浏览器的透明" class="headerlink" title="14、跨浏览器的透明"></a>14、跨浏览器的透明</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.transparent</span> &#123;</span><br><span class="line">    <span class="attribute">filter</span>: <span class="built_in">alpha</span>(opacity=<span class="number">50</span>); <span class="comment">/* internet explorer */</span></span><br><span class="line">    <span class="attribute">-khtml-opacity</span>: <span class="number">0.5</span>;      <span class="comment">/* khtml, old safari */</span></span><br><span class="line">    <span class="attribute">-moz-opacity</span>: <span class="number">0.5</span>;       <span class="comment">/* mozilla, netscape */</span></span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.5</span>;           <span class="comment">/* fx, safari, opera */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="15、CSS引用模板"><a href="#15、CSS引用模板" class="headerlink" title="15、CSS引用模板"></a>15、CSS引用模板</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">blockquote</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f9f9f9</span>;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">10px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">1.5em</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: .<span class="number">5em</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">quotes</span>: <span class="string">"\201C"</span><span class="string">"\201D"</span><span class="string">"\2018"</span><span class="string">"\2019"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">blockquote</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ccc</span>;</span><br><span class="line">    <span class="attribute">content</span>: open-quote;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">4em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: .<span class="number">1em</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: .<span class="number">25em</span>;</span><br><span class="line">    <span class="attribute">vertical-align</span>: -.<span class="number">4em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">blockquote</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="16、个性圆角"><a href="#16、个性圆角" class="headerlink" title="16、个性圆角"></a>16、个性圆角</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#container</span> &#123;</span><br><span class="line">    <span class="attribute">-webkit-border-radius</span>: <span class="number">4px</span> <span class="number">3px</span> <span class="number">6px</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius</span>: <span class="number">4px</span> <span class="number">3px</span> <span class="number">6px</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">-o-border-radius</span>: <span class="number">4px</span> <span class="number">3px</span> <span class="number">6px</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span> <span class="number">3px</span> <span class="number">6px</span> <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* alternative syntax broken into each line */</span></span><br><span class="line"><span class="selector-id">#container</span> &#123;</span><br><span class="line">    <span class="attribute">-webkit-border-top-left-radius</span>: <span class="number">4px</span>;</span><br><span class="line">    <span class="attribute">-webkit-border-top-right-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">-webkit-border-bottom-right-radius</span>: <span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">-webkit-border-bottom-left-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius-topleft</span>: <span class="number">4px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius-topright</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius-bottomright</span>: <span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius-bottomleft</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="17、通用媒体查询"><a href="#17、通用媒体查询" class="headerlink" title="17、通用媒体查询"></a>17、通用媒体查询</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* Smartphones (portrait and landscape) ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen </span><br><span class="line"><span class="keyword">and</span> (min-device-width : <span class="number">320px</span>) <span class="keyword">and</span> (max-device-width : <span class="number">480px</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* Smartphones (landscape) ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (min-width : <span class="number">321px</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* Smartphones (portrait) ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (max-width : <span class="number">320px</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* iPads (portrait and landscape) ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (min-device-width : <span class="number">768px</span>) <span class="keyword">and</span> (max-device-width : <span class="number">1024px</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* iPads (landscape) ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (min-device-width : <span class="number">768px</span>) <span class="keyword">and</span> (max-device-width : <span class="number">1024px</span>) <span class="keyword">and</span> (orientation : landscape) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* iPads (portrait) ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (min-device-width : <span class="number">768px</span>) <span class="keyword">and</span> (max-device-width : <span class="number">1024px</span>) <span class="keyword">and</span> (orientation : portrait) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* Desktops and laptops ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (min-width : <span class="number">1224px</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* Large screens ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (min-width : <span class="number">1824px</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* iPhone 4 ----------- */</span></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio:</span><span class="number">1.5</span>), <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-device-pixel-ratio:</span><span class="number">1.5</span>) &#123;</span><br><span class="line">  <span class="comment">/* Styles */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="18、现代字体栈"><a href="#18、现代字体栈" class="headerlink" title="18、现代字体栈"></a>18、现代字体栈</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* Times New Roman-based serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Cambria</span>, "<span class="selector-tag">Hoefler</span> <span class="selector-tag">Text</span>", <span class="selector-tag">Utopia</span>, "<span class="selector-tag">Liberation</span> <span class="selector-tag">Serif</span>", "<span class="selector-tag">Nimbus</span> <span class="selector-tag">Roman</span> <span class="selector-tag">No9</span> <span class="selector-tag">L</span> <span class="selector-tag">Regular</span>", <span class="selector-tag">Times</span>, "<span class="selector-tag">Times</span> <span class="selector-tag">New</span> <span class="selector-tag">Roman</span>", <span class="selector-tag">serif</span>;</span><br><span class="line"><span class="comment">/* A modern Georgia-based serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Constantia</span>, "<span class="selector-tag">Lucida</span> <span class="selector-tag">Bright</span>", <span class="selector-tag">Lucidabright</span>, "<span class="selector-tag">Lucida</span> <span class="selector-tag">Serif</span>", <span class="selector-tag">Lucida</span>, "<span class="selector-tag">DejaVu</span> <span class="selector-tag">Serif</span>," "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Vera</span> <span class="selector-tag">Serif</span>", "<span class="selector-tag">Liberation</span> <span class="selector-tag">Serif</span>", <span class="selector-tag">Georgia</span>, <span class="selector-tag">serif</span>;</span><br><span class="line"><span class="comment">/*A more traditional Garamond-based serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: "<span class="selector-tag">Palatino</span> <span class="selector-tag">Linotype</span>", <span class="selector-tag">Palatino</span>, <span class="selector-tag">Palladio</span>, "<span class="selector-tag">URW</span> <span class="selector-tag">Palladio</span> <span class="selector-tag">L</span>", "<span class="selector-tag">Book</span> <span class="selector-tag">Antiqua</span>", <span class="selector-tag">Baskerville</span>, "<span class="selector-tag">Bookman</span> <span class="selector-tag">Old</span> <span class="selector-tag">Style</span>", "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Charter</span>", "<span class="selector-tag">Nimbus</span> <span class="selector-tag">Roman</span> <span class="selector-tag">No9</span> <span class="selector-tag">L</span>", <span class="selector-tag">Garamond</span>, "<span class="selector-tag">Apple</span> <span class="selector-tag">Garamond</span>", "<span class="selector-tag">ITC</span> <span class="selector-tag">Garamond</span> <span class="selector-tag">Narrow</span>", "<span class="selector-tag">New</span> <span class="selector-tag">Century</span> <span class="selector-tag">Schoolbook</span>", "<span class="selector-tag">Century</span> <span class="selector-tag">Schoolbook</span>", "<span class="selector-tag">Century</span> <span class="selector-tag">Schoolbook</span> <span class="selector-tag">L</span>", <span class="selector-tag">Georgia</span>, <span class="selector-tag">serif</span>;</span><br><span class="line"><span class="comment">/*The Helvetica/Arial-based sans serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Frutiger</span>, "<span class="selector-tag">Frutiger</span> <span class="selector-tag">Linotype</span>", <span class="selector-tag">Univers</span>, <span class="selector-tag">Calibri</span>, "<span class="selector-tag">Gill</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">Gill</span> <span class="selector-tag">Sans</span> <span class="selector-tag">MT</span>", "<span class="selector-tag">Myriad</span> <span class="selector-tag">Pro</span>", <span class="selector-tag">Myriad</span>, "<span class="selector-tag">DejaVu</span> <span class="selector-tag">Sans</span> <span class="selector-tag">Condensed</span>", "<span class="selector-tag">Liberation</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">Nimbus</span> <span class="selector-tag">Sans</span> <span class="selector-tag">L</span>", <span class="selector-tag">Tahoma</span>, <span class="selector-tag">Geneva</span>, "<span class="selector-tag">Helvetica</span> <span class="selector-tag">Neue</span>", <span class="selector-tag">Helvetica</span>, <span class="selector-tag">Arial</span>, <span class="selector-tag">sans-serif</span>;</span><br><span class="line"><span class="comment">/*The Verdana-based sans serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Corbel</span>, "<span class="selector-tag">Lucida</span> <span class="selector-tag">Grande</span>", "<span class="selector-tag">Lucida</span> <span class="selector-tag">Sans</span> <span class="selector-tag">Unicode</span>", "<span class="selector-tag">Lucida</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">DejaVu</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Vera</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">Liberation</span> <span class="selector-tag">Sans</span>", <span class="selector-tag">Verdana</span>, "<span class="selector-tag">Verdana</span> <span class="selector-tag">Ref</span>", <span class="selector-tag">sans-serif</span>;</span><br><span class="line"><span class="comment">/*The Trebuchet-based sans serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: "<span class="selector-tag">Segoe</span> <span class="selector-tag">UI</span>", <span class="selector-tag">Candara</span>, "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Vera</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">DejaVu</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Vera</span> <span class="selector-tag">Sans</span>", "<span class="selector-tag">Trebuchet</span> <span class="selector-tag">MS</span>", <span class="selector-tag">Verdana</span>, "<span class="selector-tag">Verdana</span> <span class="selector-tag">Ref</span>", <span class="selector-tag">sans-serif</span>;</span><br><span class="line"><span class="comment">/*The heavier "Impact" sans serif */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Impact</span>, <span class="selector-tag">Haettenschweiler</span>, "<span class="selector-tag">Franklin</span> <span class="selector-tag">Gothic</span> <span class="selector-tag">Bold</span>", <span class="selector-tag">Charcoal</span>, "<span class="selector-tag">Helvetica</span> <span class="selector-tag">Inserat</span>", "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Vera</span> <span class="selector-tag">Sans</span> <span class="selector-tag">Bold</span>", "<span class="selector-tag">Arial</span> <span class="selector-tag">Black</span>", <span class="selector-tag">sans-serif</span>;</span><br><span class="line"><span class="comment">/*The monospace */</span></span><br><span class="line"><span class="selector-tag">font-family</span>: <span class="selector-tag">Consolas</span>, "<span class="selector-tag">Andale</span> <span class="selector-tag">Mono</span> <span class="selector-tag">WT</span>", "<span class="selector-tag">Andale</span> <span class="selector-tag">Mono</span>", "<span class="selector-tag">Lucida</span> <span class="selector-tag">Console</span>", "<span class="selector-tag">Lucida</span> <span class="selector-tag">Sans</span> <span class="selector-tag">Typewriter</span>", "<span class="selector-tag">DejaVu</span> <span class="selector-tag">Sans</span> <span class="selector-tag">Mono</span>", "<span class="selector-tag">Bitstream</span> <span class="selector-tag">Vera</span> <span class="selector-tag">Sans</span> <span class="selector-tag">Mono</span>", "<span class="selector-tag">Liberation</span> <span class="selector-tag">Mono</span>", "<span class="selector-tag">Nimbus</span> <span class="selector-tag">Mono</span> <span class="selector-tag">L</span>", <span class="selector-tag">Monaco</span>, "<span class="selector-tag">Courier</span> <span class="selector-tag">New</span>", <span class="selector-tag">Courier</span>, <span class="selector-tag">monospace</span>;</span><br></pre></td></tr></table></figure>
<h4 id="19、自定义文本选择"><a href="#19、自定义文本选择" class="headerlink" title="19、自定义文本选择"></a>19、自定义文本选择</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-pseudo">::selection</span> &#123; <span class="attribute">background</span>: <span class="number">#e2eae2</span>; &#125;</span><br><span class="line"><span class="selector-pseudo">::-moz-selection</span> &#123; <span class="attribute">background</span>: <span class="number">#e2eae2</span>; &#125;</span><br><span class="line"><span class="selector-pseudo">::-webkit-selection</span> &#123; <span class="attribute">background</span>: <span class="number">#e2eae2</span>; &#125;</span><br></pre></td></tr></table></figure>
<h4 id="20、为logo隐藏H1"><a href="#20、为logo隐藏H1" class="headerlink" title="20、为logo隐藏H1"></a>20、为logo隐藏H1</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">text-indent</span>: -<span class="number">9999px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">320px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">85px</span>;</span><br><span class="line">    <span class="attribute">background</span>: transparent <span class="built_in">url</span>(<span class="string">"images/logo.png"</span>) no-repeat scroll;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="21、图片边框偏光"><a href="#21、图片边框偏光" class="headerlink" title="21、图片边框偏光"></a>21、图片边框偏光</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">img</span><span class="selector-class">.polaroid</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>:<span class="number">#000</span>; <span class="comment">/*Change this to a background image or remove*/</span></span><br><span class="line">    <span class="attribute">border</span>:solid <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border-width</span>:<span class="number">6px</span> <span class="number">6px</span> <span class="number">20px</span> <span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>:<span class="number">1px</span> <span class="number">1px</span> <span class="number">5px</span> <span class="number">#333</span>; <span class="comment">/* Standard blur at 5px. Increase for more depth */</span></span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>:<span class="number">1px</span> <span class="number">1px</span> <span class="number">5px</span> <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>:<span class="number">1px</span> <span class="number">1px</span> <span class="number">5px</span> <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">200px</span>; <span class="comment">/*Set to height of your image or desired div*/</span></span><br><span class="line">    <span class="attribute">width</span>:<span class="number">200px</span>; <span class="comment">/*Set to width of your image or desired div*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="22、锚链接伪类"><a href="#22、锚链接伪类" class="headerlink" title="22、锚链接伪类"></a>22、锚链接伪类</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123; <span class="attribute">color</span>: blue; &#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123; <span class="attribute">color</span>: purple; &#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; <span class="attribute">color</span>: red; &#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123; <span class="attribute">color</span>: yellow; &#125;</span><br></pre></td></tr></table></figure>
<h4 id="23、奇特的CSS引用"><a href="#23、奇特的CSS引用" class="headerlink" title="23、奇特的CSS引用"></a>23、奇特的CSS引用</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.has-pullquote</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="comment">/* Reset metrics. */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">    <span class="comment">/* Content */</span></span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">attr</span>(data-pullquote);</span><br><span class="line">    <span class="comment">/* Pull out to the right, modular scale based margins. */</span></span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">320px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">12px</span> -<span class="number">140px</span> <span class="number">24px</span> <span class="number">36px</span>;</span><br><span class="line">    <span class="comment">/* Baseline correction */</span></span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="comment">/* Typography (30px line-height equals 25% incremental leading) */</span></span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">23px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pullquote-adelle</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"adelle-1"</span>, <span class="string">"adelle-2"</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">100</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">10px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pullquote-helvetica</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"Helvetica Neue"</span>, Arial, sans-serif;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">7px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pullquote-facit</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">"facitweb-1"</span>, <span class="string">"facitweb-2"</span>, Helvetica, Arial, sans-serif;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">7px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="24、CSS3：全屏背景"><a href="#24、CSS3：全屏背景" class="headerlink" title="24、CSS3：全屏背景"></a>24、CSS3：全屏背景</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123; </span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">'images/bg.jpg'</span>) no-repeat center center fixed; </span><br><span class="line">    <span class="attribute">-webkit-background-size</span>: cover;</span><br><span class="line">    <span class="attribute">-moz-background-size</span>: cover;</span><br><span class="line">    <span class="attribute">-o-background-size</span>: cover;</span><br><span class="line">    <span class="attribute">background-size</span>: cover;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="25、内容垂直居中"><a href="#25、内容垂直居中" class="headerlink" title="25、内容垂直居中"></a>25、内容垂直居中</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">min-height</span>: <span class="number">6.5em</span>;</span><br><span class="line">    <span class="attribute">display</span>: table-cell;</span><br><span class="line">    <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="26、强制出现垂直滚动条"><a href="#26、强制出现垂直滚动条" class="headerlink" title="26、强制出现垂直滚动条"></a>26、强制出现垂直滚动条</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123; <span class="attribute">height</span>: <span class="number">101%</span> &#125;</span><br></pre></td></tr></table></figure>
<h4 id="27、CSS3渐变模板"><a href="#27、CSS3渐变模板" class="headerlink" title="27、CSS3渐变模板"></a>27、CSS3渐变模板</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#colorbox</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#629721</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-gradient</span>(linear, left top, left bottom, from(#<span class="number">83</span>b842), <span class="built_in">to</span>(#<span class="number">629721</span>));</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #<span class="number">83</span>b842, #<span class="number">629721</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-moz-linear-gradient</span>(top, #<span class="number">83</span>b842, #<span class="number">629721</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-ms-linear-gradient</span>(top, #<span class="number">83</span>b842, #<span class="number">629721</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-o-linear-gradient</span>(top, #<span class="number">83</span>b842, #<span class="number">629721</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(top, #<span class="number">83</span>b842, #<span class="number">629721</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="28、-font-face模板"><a href="#28、-font-face模板" class="headerlink" title="28、@font-face模板"></a>28、@font-face模板</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'MyWebFont'</span>;</span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">'webfont.eot'</span>); <span class="comment">/* IE9 Compat Modes */</span></span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">'webfont.eot?#iefix'</span>) <span class="built_in">format</span>(<span class="string">'embedded-opentype'</span>), <span class="comment">/* IE6-IE8 */</span></span><br><span class="line">    <span class="built_in">url</span>(<span class="string">'webfont.woff'</span>) <span class="built_in">format</span>(<span class="string">'woff'</span>), <span class="comment">/* Modern Browsers */</span></span><br><span class="line">    <span class="built_in">url</span>(<span class="string">'webfont.ttf'</span>)  <span class="built_in">format</span>(<span class="string">'truetype'</span>), <span class="comment">/* Safari, Android, iOS */</span></span><br><span class="line">    <span class="built_in">url</span>(<span class="string">'webfont.svg#svgFontName'</span>) <span class="built_in">format</span>(<span class="string">'svg'</span>); <span class="comment">/* Legacy iOS */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'MyWebFont'</span>, Arial, sans-serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="29、缝合CSS3元素"><a href="#29、缝合CSS3元素" class="headerlink" title="29、缝合CSS3元素"></a>29、缝合CSS3元素</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>:relative;</span><br><span class="line">    <span class="attribute">z-index</span>:<span class="number">1</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">21px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.3em</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#ff0030</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#ff0030</span>, <span class="number">2px</span> <span class="number">1px</span> <span class="number">4px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">10</span>,<span class="number">10</span>,<span class="number">0</span>,.<span class="number">5</span>);</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#ff0030</span>, <span class="number">2px</span> <span class="number">1px</span> <span class="number">4px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">10</span>,<span class="number">10</span>,<span class="number">0</span>,.<span class="number">5</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#ff0030</span>, <span class="number">2px</span> <span class="number">1px</span> <span class="number">6px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">10</span>,<span class="number">10</span>,<span class="number">0</span>,.<span class="number">5</span>);</span><br><span class="line">    <span class="attribute">-webkit-border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">left </span>:<span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> dashed <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">text-decoration</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>, <span class="selector-tag">p</span> <span class="selector-tag">a</span><span class="selector-pseudo">:focus</span>, <span class="selector-tag">p</span> <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>:underline;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="30、CSS3-斑马线"><a href="#30、CSS3-斑马线" class="headerlink" title="30、CSS3 斑马线"></a>30、CSS3 斑马线</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">tbody</span> <span class="selector-tag">tr</span><span class="selector-pseudo">:nth-child(odd)</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="31、有趣的-amp"><a href="#31、有趣的-amp" class="headerlink" title="31、有趣的&amp;"></a>31、有趣的&amp;</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.amp</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: Baskerville, <span class="string">'Goudy Old Style'</span>, Palatino, <span class="string">'Book Antiqua'</span>, serif;</span><br><span class="line">    <span class="attribute">font-style</span>: italic;</span><br><span class="line">    <span class="attribute">font-weight</span>: normal;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="32、大字段落"><a href="#32、大字段落" class="headerlink" title="32、大字段落"></a>32、大字段落</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:first-letter</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ff3366</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">5.4em</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: Georgia, Times New Roman, serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="33、内部CSS3-盒阴影"><a href="#33、内部CSS3-盒阴影" class="headerlink" title="33、内部CSS3 盒阴影"></a>33、内部CSS3 盒阴影</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#mydiv</span> &#123; </span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: inset <span class="number">2px</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: inset <span class="number">2px</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">2px</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="34、外部CSS3-盒阴影"><a href="#34、外部CSS3-盒阴影" class="headerlink" title="34、外部CSS3 盒阴影"></a>34、外部CSS3 盒阴影</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#mydiv</span> &#123; </span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">2px</span> -<span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.52</span>);</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">2px</span> -<span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.52</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">2px</span> -<span class="number">2px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.52</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="35、三角形列表项目符号"><a href="#35、三角形列表项目符号" class="headerlink" title="35、三角形列表项目符号"></a>35、三角形列表项目符号</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">ul</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0.75em</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">1em</span>;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:before</span> &#123; </span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">border-color</span>: transparent <span class="number">#111</span>;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">0.35em</span> <span class="number">0</span> <span class="number">0.35em</span> <span class="number">0.45em</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">1em</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0.9em</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="36、固定宽度的居中布局"><a href="#36、固定宽度的居中布局" class="headerlink" title="36、固定宽度的居中布局"></a>36、固定宽度的居中布局</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#page-wrap</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">800px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="37、CSS3-列文本"><a href="#37、CSS3-列文本" class="headerlink" title="37、CSS3 列文本"></a>37、CSS3 列文本</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#columns-3</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: justify;</span><br><span class="line">    <span class="attribute">-moz-column-count</span>: <span class="number">3</span>;</span><br><span class="line">    <span class="attribute">-moz-column-gap</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">-moz-column-rule</span>: <span class="number">1px</span> solid <span class="number">#c4c8cc</span>;</span><br><span class="line">    <span class="attribute">-webkit-column-count</span>: <span class="number">3</span>;</span><br><span class="line">    <span class="attribute">-webkit-column-gap</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">-webkit-column-rule</span>: <span class="number">1px</span> solid <span class="number">#c4c8cc</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="38、CSS固定页脚"><a href="#38、CSS固定页脚" class="headerlink" title="38、CSS固定页脚"></a>38、CSS固定页脚</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#footer</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#444</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* IE 6 */</span></span><br><span class="line">* <span class="selector-tag">html</span> <span class="selector-id">#footer</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">expression</span>((<span class="number">0</span>-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+<span class="string">'px'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="39、IE6的PNG透明修复"><a href="#39、IE6的PNG透明修复" class="headerlink" title="39、IE6的PNG透明修复"></a>39、IE6的PNG透明修复</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.bg</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(/folder/yourimage.png) no-repeat;</span><br><span class="line">    <span class="attribute">_background</span>:none;</span><br><span class="line">    <span class="attribute">_filter</span>:progid:DXImageTransform.Microsoft.<span class="built_in">AlphaImageLoader</span>(src=<span class="string">'/folder/yourimage.png'</span>,sizingMethod=<span class="string">'crop'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 1px gif method */</span></span><br><span class="line"><span class="selector-tag">img</span>, <span class="selector-class">.png</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">behavior</span>: <span class="built_in">expression</span>((this.runtimeStyle.behavior=<span class="string">"none"</span>)&amp;&amp;(this.pngSet?this.pngSet=true:(this.nodeName == <span class="string">"IMG"</span> &amp;&amp; this.src.<span class="built_in">toLowerCase</span>().<span class="built_in">indexOf</span>(<span class="string">'.png'</span>)&gt;-<span class="number">1</span>?(this.runtimeStyle.backgroundImage = <span class="string">"none"</span>,</span><br><span class="line">       this.runtimeStyle.filter = <span class="string">"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"</span> + this.src + <span class="string">"', sizingMethod='image')"</span>,</span><br><span class="line">       this.src = <span class="string">"images/transparent.gif"</span>):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.<span class="built_in">toString</span>().<span class="built_in">replace</span>(<span class="string">'url("'</span>,<span class="string">''</span>).<span class="built_in">replace</span>(<span class="string">'")'</span>,<span class="string">''</span>),</span><br><span class="line">       this.runtimeStyle.filter = <span class="string">"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"</span> + this.origBg + <span class="string">"', sizingMethod='crop')"</span>,</span><br><span class="line">       this.runtimeStyle.backgroundImage = <span class="string">"none"</span>)),this.pngSet=true));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="40、跨浏览器设置最小高度"><a href="#40、跨浏览器设置最小高度" class="headerlink" title="40、跨浏览器设置最小高度"></a>40、跨浏览器设置最小高度</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#container</span> &#123;</span><br><span class="line">    <span class="attribute">min-height</span>: <span class="number">550px</span>;</span><br><span class="line">    <span class="attribute">height</span>: auto <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">550px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="41、CSS3-鲜艳的输入"><a href="#41、CSS3-鲜艳的输入" class="headerlink" title="41、CSS3 鲜艳的输入"></a>41、CSS3 鲜艳的输入</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=text]</span>, <span class="selector-tag">textarea</span> &#123;</span><br><span class="line">    <span class="attribute">-webkit-transition</span>: all <span class="number">0.30s</span> ease-in-out;</span><br><span class="line">    <span class="attribute">-moz-transition</span>: all <span class="number">0.30s</span> ease-in-out;</span><br><span class="line">    <span class="attribute">-ms-transition</span>: all <span class="number">0.30s</span> ease-in-out;</span><br><span class="line">    <span class="attribute">-o-transition</span>: all <span class="number">0.30s</span> ease-in-out;</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">3px</span> <span class="number">0px</span> <span class="number">3px</span> <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ddd</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=text]</span><span class="selector-pseudo">:focus</span>, <span class="selector-tag">textarea</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">81</span>, <span class="number">203</span>, <span class="number">238</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">3px</span> <span class="number">0px</span> <span class="number">3px</span> <span class="number">3px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgba</span>(<span class="number">81</span>, <span class="number">203</span>, <span class="number">238</span>, <span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="42、基于文件类型的链接样式"><a href="#42、基于文件类型的链接样式" class="headerlink" title="42、基于文件类型的链接样式"></a>42、基于文件类型的链接样式</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* external links */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href^=<span class="string">"http://"</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">13px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">'external.gif'</span>) no-repeat center right;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* emails */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href^=<span class="string">"mailto:"</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">'email.png'</span>) no-repeat center right;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* pdfs */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href$=<span class="string">".pdf"</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">18px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">'acrobat.png'</span>) no-repeat center right;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="43、强制换行"><a href="#43、强制换行" class="headerlink" title="43、强制换行"></a>43、强制换行</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">pre</span> &#123;</span><br><span class="line">    <span class="attribute">white-space</span>: pre-wrap;       <span class="comment">/* css-3 */</span></span><br><span class="line">    <span class="attribute">white-space</span>: -moz-pre-wrap;  <span class="comment">/* Mozilla, since 1999 */</span></span><br><span class="line">    <span class="attribute">white-space</span>: -pre-wrap;      <span class="comment">/* Opera 4-6 */</span></span><br><span class="line">    <span class="attribute">white-space</span>: -o-pre-wrap;    <span class="comment">/* Opera 7 */</span></span><br><span class="line">    <span class="attribute">word-wrap</span>: break-word;       <span class="comment">/* Internet Explorer 5.5+ */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="44、在可点击的项目上强制手型"><a href="#44、在可点击的项目上强制手型" class="headerlink" title="44、在可点击的项目上强制手型"></a>44、在可点击的项目上强制手型</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href]</span>, <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">'submit'</span>]</span>, <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">'image'</span>]</span>, <span class="selector-tag">label</span><span class="selector-attr">[for]</span>, <span class="selector-tag">select</span>, <span class="selector-tag">button</span>, <span class="selector-class">.pointer</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="45、网页顶部盒阴影"><a href="#45、网页顶部盒阴影" class="headerlink" title="45、网页顶部盒阴影"></a>45、网页顶部盒阴影</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">8</span>);</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">8</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">8</span>);</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="46、CSS3对话气泡"><a href="#46、CSS3对话气泡" class="headerlink" title="46、CSS3对话气泡"></a>46、CSS3对话气泡</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.chat-bubble</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ededed</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#666</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">35px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.3em</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">10px</span> auto;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">-webkit-border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">#888</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> <span class="number">#888</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'Bangers'</span>, arial, serif; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.chat-bubble-arrow-border</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#666</span> transparent transparent transparent;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">bottom</span>: -<span class="number">42px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.chat-bubble-arrow</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#ededed</span> transparent transparent transparent;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">bottom</span>: -<span class="number">39px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="47、H1-H5默认样式"><a href="#47、H1-H5默认样式" class="headerlink" title="47、H1-H5默认样式"></a>47、H1-H5默认样式</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>,<span class="selector-tag">h2</span>,<span class="selector-tag">h3</span>,<span class="selector-tag">h4</span>,<span class="selector-tag">h5</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#005a9c</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h1</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">2.6em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">2.45em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h2</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">2.1em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.9em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h3</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1.8em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.65em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h4</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1.65em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.4em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h5</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1.4em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.25em</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="48、纯CSS背景噪音"><a href="#48、纯CSS背景噪音" class="headerlink" title="48、纯CSS背景噪音"></a>48、纯CSS背景噪音</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="number">6</span>hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+<span class="number">76</span>pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/<span class="number">7</span>gC9hesnr+<span class="number">7</span>wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/<span class="number">3</span>fEV5a+<span class="number">4</span>wz//<span class="number">6</span>qy8JxjZsmxxy5+<span class="number">4</span>w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+<span class="number">4</span>/wuqcXY47QILbgAAAABJRU5ErkJggg==);</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0094d0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="49、持久的列表排序"><a href="#49、持久的列表排序" class="headerlink" title="49、持久的列表排序"></a>49、持久的列表排序</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">ol</span><span class="selector-class">.chapters</span> &#123;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span><span class="selector-class">.chapters</span> &gt; <span class="selector-tag">li</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">counter</span>(chapter) <span class="string">". "</span>;</span><br><span class="line">    <span class="attribute">counter-increment</span>: chapter;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">40px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span><span class="selector-class">.chapters</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">clear</span>: left;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span><span class="selector-class">.start</span> &#123;</span><br><span class="line">    <span class="attribute">counter-reset</span>: chapter;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span><span class="selector-class">.continue</span> &#123;</span><br><span class="line">    <span class="attribute">counter-reset</span>: chapter <span class="number">11</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="50、CSS悬浮提示文本"><a href="#50、CSS悬浮提示文本" class="headerlink" title="50、CSS悬浮提示文本"></a>50、CSS悬浮提示文本</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123; </span><br><span class="line">    <span class="attribute">border-bottom</span>:<span class="number">1px</span> solid <span class="number">#bbb</span>;</span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#666</span>;</span><br><span class="line">    <span class="attribute">display</span>:inline-block;</span><br><span class="line">    <span class="attribute">position</span>:relative;</span><br><span class="line">    <span class="attribute">text-decoration</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#36c</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>:<span class="number">1px</span>; </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* Tooltip styling */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-tooltip]</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">8px</span> solid <span class="number">#222</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">8px</span> solid <span class="built_in">hsla</span>(<span class="number">0</span>,<span class="number">0%</span>,<span class="number">0%</span>,.<span class="number">85</span>);</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">8px</span> solid transparent;</span><br><span class="line">    <span class="attribute">border-right</span>: <span class="number">8px</span> solid transparent;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">25%</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-tooltip]</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#222</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">hsla</span>(<span class="number">0</span>,<span class="number">0%</span>,<span class="number">0%</span>,.<span class="number">85</span>);</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#f6f6f6</span>;</span><br><span class="line">    <span class="attribute">content</span>: <span class="built_in">attr</span>(data-tooltip);</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">    <span class="attribute">font-family</span>: sans-serif;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">32px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">32px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">1px</span> <span class="built_in">hsla</span>(<span class="number">0</span>,<span class="number">0%</span>,<span class="number">0%</span>,<span class="number">1</span>);</span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">    <span class="attribute">-webkit-border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">-o-border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-tooltip]</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">9px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-tooltip]</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">41px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-tooltip]</span><span class="selector-pseudo">:active</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[data-tooltip]</span><span class="selector-pseudo">:active</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">42px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="51、深灰色的圆形按钮"><a href="#51、深灰色的圆形按钮" class="headerlink" title="51、深灰色的圆形按钮"></a>51、深灰色的圆形按钮</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.graybtn</span> &#123;</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>:inset <span class="number">0px</span> <span class="number">1px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>:inset <span class="number">0px</span> <span class="number">1px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>:inset <span class="number">0px</span> <span class="number">1px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attribute">background</span>:<span class="built_in">-webkit-gradient</span>( linear, left top, left bottom, color-stop(<span class="number">0.05</span>, #ffffff), <span class="built_in">color-stop</span>(<span class="number">1</span>, #d1d1d1) );</span><br><span class="line">    <span class="attribute">background</span>:<span class="built_in">-moz-linear-gradient</span>( center top, #ffffff <span class="number">5%</span>, #d1d1d1 <span class="number">100%</span> );</span><br><span class="line">    <span class="attribute">filter</span>:progid:DXImageTransform.Microsoft.<span class="built_in">gradient</span>(startColorstr=<span class="string">'#ffffff'</span>, endColorstr=<span class="string">'#d1d1d1'</span>);</span><br><span class="line">    <span class="attribute">background-color</span>:<span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attribute">-moz-border-radius</span>:<span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">-webkit-border-radius</span>:<span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>:<span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#dcdcdc</span>;</span><br><span class="line">    <span class="attribute">display</span>:inline-block;</span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#777777</span>;</span><br><span class="line">    <span class="attribute">font-family</span>:arial;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>:bold;</span><br><span class="line">    <span class="attribute">padding</span>:<span class="number">6px</span> <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">text-decoration</span>:none;</span><br><span class="line">    <span class="attribute">text-shadow</span>:<span class="number">1px</span> <span class="number">1px</span> <span class="number">0px</span> <span class="number">#ffffff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.graybtn</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>:<span class="built_in">-webkit-gradient</span>( linear, left top, left bottom, color-stop(<span class="number">0.05</span>, #d1d1d1), <span class="built_in">color-stop</span>(<span class="number">1</span>, #ffffff) );</span><br><span class="line">    <span class="attribute">background</span>:<span class="built_in">-moz-linear-gradient</span>( center top, #d1d1d1 <span class="number">5%</span>, #ffffff <span class="number">100%</span> );</span><br><span class="line">    <span class="attribute">filter</span>:progid:DXImageTransform.Microsoft.<span class="built_in">gradient</span>(startColorstr=<span class="string">'#d1d1d1'</span>, endColorstr=<span class="string">'#ffffff'</span>);</span><br><span class="line">    <span class="attribute">background-color</span>:<span class="number">#d1d1d1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.graybtn</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>:relative;</span><br><span class="line">    <span class="attribute">top</span>:<span class="number">1px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="52、在可打印的网页中显示URLs"><a href="#52、在可打印的网页中显示URLs" class="headerlink" title="52、在可打印的网页中显示URLs"></a>52、在可打印的网页中显示URLs</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@media</span> print   &#123;  </span><br><span class="line">  <span class="selector-tag">a</span><span class="selector-pseudo">:after</span> &#123;  </span><br><span class="line">    <span class="attribute">content</span>: <span class="string">" ["</span> <span class="built_in">attr</span>(href) <span class="string">"] "</span>;  </span><br><span class="line">  &#125;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="53、禁用移动Webkit的选择高亮"><a href="#53、禁用移动Webkit的选择高亮" class="headerlink" title="53、禁用移动Webkit的选择高亮"></a>53、禁用移动Webkit的选择高亮</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">-webkit-touch-callout</span>: none;</span><br><span class="line">    <span class="attribute">-webkit-user-select</span>: none;</span><br><span class="line">    <span class="attribute">-khtml-user-select</span>: none;</span><br><span class="line">    <span class="attribute">-moz-user-select</span>: none;</span><br><span class="line">    <span class="attribute">-ms-user-select</span>: none;</span><br><span class="line">    <span class="attribute">user-select</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="54、CSS3-圆点图案"><a href="#54、CSS3-圆点图案" class="headerlink" title="54、CSS3 圆点图案"></a>54、CSS3 圆点图案</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle, white <span class="number">10%</span>, transparent <span class="number">10%</span>),</span><br><span class="line">    <span class="built_in">radial-gradient</span>(circle, white <span class="number">10%</span>, black <span class="number">10%</span>) <span class="number">50px</span> <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">100px</span> <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="55、CSS3-方格图案"><a href="#55、CSS3-方格图案" class="headerlink" title="55、CSS3 方格图案"></a>55、CSS3 方格图案</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: white;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, black <span class="number">25%</span>, transparent <span class="number">25%</span>, transparent <span class="number">75%</span>, black <span class="number">75%</span>, black), </span><br><span class="line">    <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, black <span class="number">25%</span>, transparent <span class="number">25%</span>, transparent <span class="number">75%</span>, black <span class="number">75%</span>, black);</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">100px</span> <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">0</span>, <span class="number">50px</span> <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="56、Github的fork色带"><a href="#56、Github的fork色带" class="headerlink" title="56、Github的fork色带"></a>56、Github的fork色带</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.ribbon</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#a00</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="comment">/* top left corner */</span></span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">3em</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">2.5em</span>;</span><br><span class="line">    <span class="comment">/* 45 deg ccw rotation */</span></span><br><span class="line">    <span class="attribute">-moz-transform</span>: <span class="built_in">rotate</span>(-<span class="number">45deg</span>);</span><br><span class="line">    <span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(-<span class="number">45deg</span>);</span><br><span class="line">    <span class="comment">/* shadow */</span></span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1em</span> <span class="number">#888</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1em</span> <span class="number">#888</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.ribbon</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#faa</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">font</span>: bold <span class="number">81.25%</span> <span class="string">'Helvetiva Neue'</span>, Helvetica, Arial, sans-serif;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0.05em</span> <span class="number">0</span> <span class="number">0.075em</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0.5em</span> <span class="number">3.5em</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="comment">/* shadow */</span></span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0.5em</span> <span class="number">#444</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="57、CSS-font属性缩写"><a href="#57、CSS-font属性缩写" class="headerlink" title="57、CSS font属性缩写"></a>57、CSS font属性缩写</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font</span>: italic small-caps bold <span class="number">1.2em</span>/<span class="number">1.0em</span> Arial, Tahoma, Helvetica;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="58、论文页面的卷曲效果"><a href="#58、论文页面的卷曲效果" class="headerlink" title="58、论文页面的卷曲效果"></a>58、论文页面的卷曲效果</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span>; <span class="comment">/* prevent shadows falling behind containers with backgrounds */</span></span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.box</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#efefef</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">30px</span> <span class="number">30px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.27</span>), <span class="number">0</span> <span class="number">0</span> <span class="number">40px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.06</span>) inset;</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.27</span>), <span class="number">0</span> <span class="number">0</span> <span class="number">40px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.06</span>) inset; </span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.27</span>), <span class="number">0</span> <span class="number">0</span> <span class="number">40px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.06</span>) inset; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.box</span> <span class="selector-tag">li</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.box</span> <span class="selector-tag">li</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">70%</span>;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">300px</span>; <span class="comment">/* avoid rotation causing ugly appearance at large container widths */</span></span><br><span class="line">    <span class="attribute">max-height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">55%</span>;</span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>);</span><br><span class="line">    <span class="attribute">-moz-box-shadow</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.3</span>);</span><br><span class="line">    <span class="attribute">-webkit-transform</span>: <span class="built_in">skew</span>(-<span class="number">15deg</span>) <span class="built_in">rotate</span>(-<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">-moz-transform</span>: <span class="built_in">skew</span>(-<span class="number">15deg</span>) <span class="built_in">rotate</span>(-<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">-ms-transform</span>: <span class="built_in">skew</span>(-<span class="number">15deg</span>) <span class="built_in">rotate</span>(-<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">-o-transform</span>: <span class="built_in">skew</span>(-<span class="number">15deg</span>) <span class="built_in">rotate</span>(-<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">skew</span>(-<span class="number">15deg</span>) <span class="built_in">rotate</span>(-<span class="number">6deg</span>); </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.box</span> <span class="selector-tag">li</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">left</span>: auto;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">-webkit-transform</span>: <span class="built_in">skew</span>(<span class="number">15deg</span>) <span class="built_in">rotate</span>(<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">-moz-transform</span>: <span class="built_in">skew</span>(<span class="number">15deg</span>) <span class="built_in">rotate</span>(<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">-ms-transform</span>: <span class="built_in">skew</span>(<span class="number">15deg</span>) <span class="built_in">rotate</span>(<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">-o-transform</span>: <span class="built_in">skew</span>(<span class="number">15deg</span>) <span class="built_in">rotate</span>(<span class="number">6deg</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">skew</span>(<span class="number">15deg</span>) <span class="built_in">rotate</span>(<span class="number">6deg</span>); </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="59、鲜艳的锚链接"><a href="#59、鲜艳的锚链接" class="headerlink" title="59、鲜艳的锚链接"></a>59、鲜艳的锚链接</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#00e</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#551a8b</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#06e</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">    <span class="attribute">outline</span>: thin dotted;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>, <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span>, <span class="selector-tag">a</span><span class="selector-pseudo">:visited</span>, <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">-webkit-transition</span>: all .<span class="number">3s</span> ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>, <span class="selector-class">.glow</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ff0</span>;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">#ff0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="60、带CSS3特色的横幅显示"><a href="#60、带CSS3特色的横幅显示" class="headerlink" title="60、带CSS3特色的横幅显示"></a>60、带CSS3特色的横幅显示</h4><hr>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.featureBanner</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">20px</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.featureBanner</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"Featured"</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#232323</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">15px</span> solid <span class="number">#ffa200</span>;</span><br><span class="line">    <span class="attribute">border-right-color</span>: transparent;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: -<span class="number">0px</span> <span class="number">5px</span> <span class="number">5px</span> -<span class="number">5px</span> <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.featureBanner</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">35px</span>;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">4px</span> solid <span class="number">#89540c</span>;</span><br><span class="line">    <span class="attribute">border-left-color</span>: transparent;</span><br><span class="line">    <span class="attribute">border-bottom-color</span>: transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/08/08/PS基本切图及应用/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/08/13/配置sublime的LiveReload与webstorm的插件实现实时预览/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
